<template>
  <div class="user-info">
    <div style="display:flex">
      <div class="avatar-box" @click="btnClick">
          <img v-if="avatarUrl" :src="avatarUrl"/>
              <el-avatar v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          <div class="overlay">
            <span>更换头像</span>
          </div>
        <AvatarChange v-model:dialogVisibleCorpper="dialogVisibleCorpper" @confirm="confirm" />
      </div>
      <div style="margin-top:4%">
          <h1 style="letter-spacing: 3px;font-size:20px;">{{ name }}</h1>
          <div class="stats">
            <span>关注用户：{{ followers }}</span>
            <span class="span-divider">粉丝：{{ fans }}</span>
          </div>
      </div>
    </div>
    <div class="bio-box">
      <p>简介: {{ bio }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import AvatarChange from './avatarChange.vue'; 

const { proxy } = getCurrentInstance();
const avatarUrl = ref('');
const dialogVisibleCorpper = ref(false);
const name = ref('loading...');
const followers = ref(0);
const fans = ref(0);
const bio = ref(null);

const btnClick = () => {
  dialogVisibleCorpper.value = true;
};

const confirm = (newAvatarUrl) => {
  avatarUrl.value = newAvatarUrl;
  
  dialogVisibleCorpper.value = false;
};

// 获取用户数据的函数
const fetchUserData = async () => {
  
    await proxy.$http.post('/get_num/').then(
      (response)=>{
        avatarUrl.value = response.data.head;
        name.value = response.data.nick;
        followers.value =response.data.fans;
        fans.value = response.data.loved;
        bio.value = response.data.sig;
        ElMessage.success(res.data.message)
      }
    ).catch(err=>{
      
    });
};

onMounted(() => {
  fetchUserData();
});
</script>

<style scoped>
 .user-info{
    width: 97%;
    height: 230px;
    display: flex;
    background-color: white;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
  }
  h1 {
    letter-spacing: 3px;
    font-size:30px;
  }
  .avatar-box {
    position: relative;
    margin: 4% 4% 0 4%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 0.5px solid #ccc;
  }
  .avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .avatar-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .avatar-box .el-avatar{
    width: 100%;
    height: 100%;
  }
  .avatar-box:hover .overlay {
    opacity: 1;
    cursor: pointer;
  }
  .span-divider {
    border-left: 1.5px solid #ccc;
    padding-left: 15px;
    margin-left: 15px;
    height: 30px; /* 控制竖线的高度 */
    line-height: 30px; /* 使文本垂直居中 */
    display: inline-block; /* 改变display属性以支持高度定义 */
  }
  .stats {
    margin: 10px 0;
    margin-top: 10%;
    font-size: 14px;
    color: #666;
  }
  .bio-box {
    margin-left: 4%;
    margin-top: 2%;
    font-size: 17px;
  }
</style>